<template>
  <div class="all-head">
    <!--用户名，系统报修等-->
    <div class="user-info">
      <div class="user-name back-same">
        <span>用户名</span>
        <div class="user-block">
          <div class="top">
            <div class="img">
              <img src="">
            </div>
            <div class="right">
              <p>关二哥</p>
              <p>
                <span>编号：</span>
                <span>123456789</span>
              </p>
            </div>
          </div>
          <div class="bottom">
            <span>忘记密码？</span>
            <span>修改密码</span>
            <span>退出</span>
          </div>
        </div>
      </div>
      <div class="system-repair back-same">系统报修</div>
      <div class="oa-system back-same">OA系统</div>
      <div class="email back-same">电子邮箱</div>
      <div class="wcp">WCP字段</div>
    </div>
    <!--产品、系统、搜索-->
    <div class="product-tab">
      <div class="product">产品</div>
      <div class="system">系统</div>
      <div class="search">
        <el-select
          v-model="value"
          placeholder="请选择"
          >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        <el-input
          v-model="input"
          placeholder="请输入ID/编号快速查询"
          />
        <i class="el-icon-search" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  name: 'HeaderTop',
  setup() {
    const value = ref('自由行')
    const input = ref('')
    const options = reactive([
      {
        value: '选项2',
        label: '酒店'
      },
      {
        value: '选项3',
        label: '门票'
      },
      {
        value: '选项4',
        label: '签证'
      },
      {
        value: '选项5',
        label: '保险'
      },
      {
        value: '选项5',
        label: '采购'
      }
    ])

    return {
      value,
      options,
      input
    }
  }
})

</script>

<style lang="scss" scoped>
.user-info {
  background-color: #152887;
  color: #fff;
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.user-name:hover .user-block {
  display: block;
}
.user-name:hover {
  background-color: #fff;
  color: #152887;
  box-sizing: border-box;
}
.back-same {
  position: relative;
  margin-right: 50px;
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 18px;
    right: -24px;
    top: 3px;
    background-color: #fff;
  }
}
.user-name {
  padding: 10px;
  &::after {
    top: 13px;
  }
}
.user-block {
  color: #000;
  background-color: #fff;
  position: absolute;
  top: 40px;
  left: 0;
  width: 200px;
  box-shadow: 2px 2px 5px #888888;
  display: none;
  z-index: 1;
  .bottom {
    border-top: 1px solid #E4E4E4;
    padding-top: 15px;
  }
}

.wcp {
  margin-right: 200px;
}

.product-tab {
  height: 120px;
  background-color: #fff;
  padding: 45px 0;
  padding-left: 340px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  .product {
    margin-right: 70px;
  }
  .search {
    display: flex;
    position: absolute;
    left: 1200px;
    .el-select {
      width: 95px;
    }

    .el-input {
      position: absolute;
      left: 94px;
      width: 225px;
    }
    .el-input--suffix {
      height: 80px;
    }
    .el-icon-search {
      position: absolute;
      left: 318px;
      top: 1px;
      width: 37px;
      height: 37px;
      font-size: 22px;
      color: #BABABA;
      border: 1px solid #DCDFE6;
      &::before {
        position: absolute;
        left: 8px;
        top: 8px;
      }
    }
  }
}
</style>
